<!--css 在login.less-->

<template>
	<section id="forgetPwd">
		<HeaDer :Title='titleData'></HeaDer>
		<section class="forgetWarp">
			<section class="title">
				<h2>忘记密码</h2>
			</section>
			<section class="formWarp">
				<van-cell-group>
					<van-field v-model="userData.mobile" placeholder="请输入手机号" icon="close" @click-icon="userData.mobile='' " />
				</van-cell-group>
				<section class="btnWarp" @click="next">
					<section class="btn">
						下一步
					</section>
				</section>
			</section>
		</section>

		<!--底部弹框-->

		<van-popup v-model="show" position="bottom" :overlay="true">
			<section class="mobelTitle">
				<div class="titleWarp">
					<span class="title">安全验证</span>
					<span class="close" @click="close">取消</span>
				</div>
			</section>
			<section class="alseWarp">
				<section class="phone">
					{{$public.phoneEncryption(userData.mobile)}}
				</section>
				<section class="codeWarp">
					<van-field v-model="userData.code" placeholder="请输入验证码" icon="close" @click-icon="userData.code='' " />
					<input type="button" :value="btnCode.val"  :disabled="btnCode.disabled" class="prompt" @click="getCode">
				</section>

				<section class="btnWarp" @click="submit">
					<section class="btn">
						确定
					</section>
				</section>
			</section>

		</van-popup>
	</section>
</template>

<script>
	import HeaDer from "../common/header.vue";

	export default {
		data() {
			return {
				show: false,
				btnCode: {
					time: 59,
					disabled: false, //控制点击和不可点击
					val: '点击获取验证码'
				}, 
				//头部返回所需数据
				titleData: {
					name: '',
					flat: 1
				},
				//要发送给后台的数据
				userData: {
					mobile: '',  //手机号
					code: ''  //验证码
				}
			}
		},
		methods: {
			next() {
				//点击下一步执行函数
				var _this = this;
				if(!_this.$public.checkMobile(_this.userData.mobile)) {
					_this.$toast('手机号格式有误');
					return false;
				}

				_this.$http.post(_this.$host.have_phone, {
					mobile: _this.userData.mobile
				}).then(function(response) {
					if(response.data.status == 0) {
						_this.show = true;
					} else {
						_this.$dialog.confirm({
							title: '提示',
							message: '该账号还没注册,是否前往注册？'
						}).then(() => {
							_this.$public.go('register', 0, _this);
						}).catch(() => {});

					}

				}).catch(function() {})

			
			},
			//点击取消执行函数
			close(){
				var _this = this;
				_this.show = false;
				_this.btnCode.time = -1;
			},
			//点击获取验证码执行函数
			getCode(){
				var _this = this;
				_this.$public.getCode(_this.userData.mobile, 2, _this);
			},
			//点击确定执行函数
			submit() {
				var _this = this;
				if(!_this.$public.code(_this.userData.code)){
					_this.$toast('验证码格式有误');
					return false;
				}
				_this.$http.post(_this.$host.check_code,_this.userData).then(function(response){
					if(response.data.status == 200){
						_this.show = false;
						_this.$public.go('setpwd', 0, _this,{code:_this.userData.code});
						sessionStorage.setItem('mobile',_this.userData.mobile);  //手机号缓存
					}else{
						_this.close();
					}
				}).catch(function(){})
				
				
			}
		},
		components: {
			'HeaDer': HeaDer
		}
	}
</script>

<style>

</style>